import { makeAutoObservable } from "mobx";

interface Todo {
  id: number;
  todoName: string;
  isDone: boolean;
}

class TodoListStore {
  // 初始化数据
  todoList = [
    {
      id: 1,
      todoName: "吃饭",
      isDone: false,
    },
    {
      id: 2,
      todoName: "睡觉",
      isDone: true,
    },
    {
      id: 3,
      todoName: "打豆豆",
      isDone: false,
    },
  ];

  // 计算属性
  // 当数据不是直接展示，需要处理/计算才能展示，可以使用计算属性
  // 已完成数量
  get isDoneNum() {
    // reduce常用于统计、求和等操作
    return this.todoList.reduce((p, c) => {
      return p + (c.isDone ? 1 : 0);
    }, 0);
  }
  // 总数
  get total() {
    return this.todoList.length;
  }

  constructor() {
    // 自动将this上的数据变成响应式
    // 将原型上的方法变成action
    makeAutoObservable(this);
  }

  // 添加todo
  addTodo(todoName: string) {
    // 过去react不推荐直接修改数据，返回一份新数据
    // this.todoList = [
    //   ...this.todoList,
    //   { id: Date.now(), todoName, isDone: false }
    // ];

    // mobx是响应式数据，直接更新数据用户界面就会更新
    this.todoList.push({ id: Date.now(), todoName, isDone: false });
  }

  // 更新todo的isDone
  updateTodo(id: number) {
    // find查找某个元素，函数返回值true就是找到了，找到了，后面就不看了，并返回当前的item
    // 所有函数返回值都是false，就是没有找到，返回值就是undefined
    const todo = this.todoList.find((todo) => todo.id === id) as Todo;
    todo.isDone = !todo.isDone;
  }

  // 全选/全不选
  updateAllTodo(isDone: boolean) {
    this.todoList.forEach((todo) => {
      todo.isDone = isDone;
    });
  }

  // 删除
  delTodo(id: number) {
    // 返回true是保留
    // 返回false是过滤
    this.todoList = this.todoList.filter((todo) => todo.id !== id);
  }

  // 批量删除
  batchDelTodo() {
    this.todoList = this.todoList.filter((todo) => !todo.isDone);
  }
}

export default new TodoListStore();
